<template>
    <div>
        <div
            class="
                py-3
                px-6
                bg-gradient-to-r
                from-yellow-400
                via-pink-400
                to-red-500
                text-white
                flex
                justify-between
                items-center
            "
        >
            <div class="flex space-x-6 items-center">
                <div @click="showModal = true" class="flex items-center space-x-1">
                    <div>签到</div>
                    <icon-font name="renwu" />
                </div>
                <router-link to="/ViewDiary">
                    <div class="flex items-center space-x-1">
                        <div>日记</div>
                        <icon-font name="bianjiqianbixieshuru2" />
                    </div>
                </router-link>
                <router-link to="/blog">
                    <div class="flex items-center space-x-1">
                        <div>社区</div>
                        <icon-font name="fankui" />
                    </div>
                </router-link>
                <router-link to="/information">
                    <div class="flex items-center space-x-1">
                        <div>消息</div>
                        <icon-font name="tixing" />
                    </div>
                </router-link>
            </div>
            <div>
                <router-link to="about"><icon-font name="my-fill-light" class="text-2xl" /></router-link>
            </div>
        </div>
        <div>
            <router-view></router-view>
        </div>
        <sign-modal :show-modal="showModal" @close="showModal = false" />
        <return-tool />
    </div>
</template>

<script>
import IconFont from '../components/IconFont.vue'
import SignModal from '../components/modal/SignModal.vue'
import ReturnTool from '../components/ReturnTool.vue'

export default {
    components: {
        IconFont,
        SignModal,
        ReturnTool,
    },

    data: () => ({
        showModal: false,
    }),
}
</script>

<style></style>
